<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link href="./css/main.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
    <title>卡密处理</title>
    </title>
</head>

<body style="background-image: url(./img/bg.jpg);">
    <div id="app">
        <div class="banner"></div>
        <div class="content">
            <div class="input">
                <div>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8}" placeholder="请输入兑换码" v-model="card">
                    </el-input>
                </div>
                <div>
                    <el-input v-if="output!=''" type="textarea" :autosize="{ minRows: 2, maxRows: 8}" v-model="output">
                    </el-input>
                </div>
                <div>
                    <el-button style="width:100%" type="primary" @click="btn">立即转换</el-button>
                </div>
                <div v-if="length!=-1">
                    <el-button style="width:100%" type="primary" @click="copy">一键复制</el-button>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                card: '',
                output: '',
                length: -1
            },
            methods: {
                btn() {
                    // 获取浏览器地址栏的url
                    let url = window.location.origin;
                    let cardArr = this.card.split(/[(\r\n)\r\n]+/);
                    this.length = cardArr.length
                    // 给数组的每一项前面加上url并返回新数组
                    let cardArr2 = cardArr.map((item) => {
                        return `${url}/?${item}`
                    })
                    // 以换行符分割数组赋值给output
                    this.output = cardArr2.join('\n')
                    this.$message({
                        message: `恭喜你，成功转换${this.length}个卡密`,
                        type: 'success'
                    });
                },
                copy() {
                    navigator.clipboard.writeText(this.output.trim()).then(() => {
                        this.$message.success('复制成功')
                    })
                },
            }

        })
    </script>